{extend name="base" /}
{block name="css"}
    <link rel="stylesheet" href="{__CSS__}/gougu/css/gougu.css?v={:rand_number()}" media="all">
    <link rel="stylesheet" href="{__CSS__}/css/home.css?v={:rand_number()}"/>
    <link rel="stylesheet" href="{__STATIC__}/admin/css/admin.css?v={:rand_number()}">
{/block}
{block name="body"}
<!-- 正文开始 -->
<blockquote class="layui-elem-quote">
    <legend><i style="color:<?php echo $cssColor;?>;">系统时间：{$config.beijing_time}&nbsp;&nbsp;上次时间：{$admin.prev_time|date='Y-m-d H:i:s'}&nbsp;&nbsp;本次登录时间：{$admin.login_time|date='Y-m-d H:i:s'}&nbsp;&nbsp;<span id="test"></span></i></legend>
</blockquote>
<div class="layui-fluid">
    {if $Think.config.app.app_debug}
<div class="alert alert-danger-light">
    安全提示：当前网站【调试模式】开启中，强烈建议在正式部署后关闭调试模式
</div>   
{/if}  
  {if $indexTips}
  <script type="text/javascript">
  window.onload = function() {      
setTimeout(function delayedExecution() {
layer.msg('<?php echo html_entity_decode($indexTips); ?>',{time:5000});//2秒后自动关闭
}, 1000);
  };
</script>
    {/if} 
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md8">
    <!--轮播在cms.base.js里-->
    <div class="layui-carousel" id="banner">
      <div carousel-item>
        
            {foreach $banner as $vo}

                <div style="background-image: url('{$vo.image}'); background-position: center;">
            <div class="layui-container">  
                <div class="pro-con pull-left">
                    <p class="layui-anim layui-anim-up" style="margin-top:30px;">
                       <blockquote class="layui-elem-quote" style="background-color:rgba(0,0,0,50%);color:#fff;">
                   {:html_entity_decode($vo.desc)}
                 </blockquote> 
                    </p>
                </div>
            </div>
        </div>
        {/foreach}
      </div>
    </div>
    </div>
    {if(empty(ishone()))}  
   <div class="layui-col-md4">
       <div class="grid-demo"><img src="<?php echo seo('image');?>" height="150" width="100%"></div>
    </div>
  {/if}
  </div>
  <hr class="layui-bg-green">
    <!-- 快捷方式 -->
    <div id="consoleLink" class="layui-row layui-col-space15">
        <div class="layui-col-lg3 layui-col-md3 layui-col-sm3 layui-col-xs6">
            <div class="console-link-block ajax-link" user-menu-url="{:url('articleLog/list')}" tiptext="确认访问文章数量" menu-title="文章浏览日志">
                <div class="console-link-block-num">{$view}</div>
                <div class="console-link-block-text">文章浏览日志({$yesterday})</div>
                <img class="console-link-block-icon" src="{__JS__}/images/homepic4.png">
            </div>
        </div>
        <div class="layui-col-lg3 layui-col-md3 layui-col-sm3 layui-col-xs6">
            <div class="console-link-block ajax-link" user-menu-url="{:url('adminLog/list')}" tiptext="确认访问管理员日志" menu-title="管理员日志">
                <div class="console-link-block-num">{$admin_log}</div>
                <div class="console-link-block-text">管理员日志</div>
                <img class="console-link-block-icon" src="{__JS__}/images/homepic1.png">
            </div>
        </div>
        <div class="layui-col-lg3 layui-col-md3 layui-col-sm3 layui-col-xs6">
            <div class="console-link-block ajax-link" user-menu-url="{:url('article/list')}" tiptext="确认访问文章数量" ew-title="文章数量">
                <img class="console-link-block-icon" src="{__JS__}/images/homepic5.png">
                <div class="console-link-block-num">{$cat}</div>
                <div class="console-link-block-text">文章数量</div>
            </div>
        </div>
       
        <div class="layui-col-lg3 layui-col-md3 layui-col-sm3 layui-col-xs6">
            <div class="console-link-block ajax-link" user-menu-url="{:url('userLog/list')}" tiptext="确认访问会员日志" ew-title="会员日志">
                <img class="console-link-block-icon" src="{__JS__}/images/homepic3.png">
                <div class="console-link-block-num">{$user_log}</div>
                <div class="console-link-block-text">会员日志</div>
            </div>
        </div>
    </div>
   <!-- 统计图表 -->
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md4 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header"><i class="fa fa-home"></i> 日统计</div>
                <div class="layui-card-body">
                    <div style="height: 300px;position: relative;">
                        <div id="tjDivDay" style="height: 100%;"></div>
                        <span id="btnShowDetail"
                              style="color: #1AB4E8;font-size: 18px;position: absolute;bottom: 75px;left: 50%;transform: translateX(-50%);cursor: pointer;">
                            签到明细<i class="layui-icon layui-icon-right" style="font-size: 16px;"></i>
                        </span>
                    </div>
                    <div class="layui-row text-center">
                        <div class="layui-col-xs6">
                            <div id="tv1Num1" style="color: #28a6d6;font-size: 22px;">{$count-$signin}</div>
                            <div style="font-size: 18px;padding: 10px 0 15px 0;">未签到</div>
                        </div>
                        <div class="layui-col-xs6">
                            <div id="tv1Num2" style="color: #28a6d6;font-size: 22px;">{$signin}</div>
                            <div style="font-size: 18px;padding: 10px 0 15px 0;">已签到</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header"><i class="fa fa-signal"></i> 周统计</div>
                <div class="layui-card-body">
                    <div id="tjDivWeek" style="height: 373px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header"><i class="fa fa-cog"></i> 月统计</div>
                <div class="layui-card-body">
                    <div id="tjDivMonth" style="height: 373px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
    <div id="consoleLink" class="layui-row layui-col-space15">
        <div class="layui-col-md7 layui-col-sm6 layui-col-xs12">
           <div class="layui-card">
            <div class="layui-card-header"><h3><i class="layui-icon layui-icon-set"></i>系统信息</h3></div>
                <table class="layui-table" lay-skin="" lay-size="sm">
                 
                    <tr class="firstRow">
                        <td class="align_right" style="word-break: break-all;">服务器系统</td>
                        <th colspan="4" class="buy_title" style="word-break: break-all;">
                           {$config.server_os}
                        </th>
                    </tr>
                    <tr class="firstRow">
                        <td class="align_right" style="word-break: break-all;">PHP版本</td>
                        <th colspan="4" class="buy_title" style="word-break: break-all;">
                           {$config.php_version}
                        </th>
                    </tr>
                    <tr class="firstRow">
                        <td class="align_right" style="word-break: break-all;">上传附件限制</td>
                        <th colspan="4" class="buy_title" style="word-break: break-all;">
                           {$config.max_upload_size}
                        </th>
                    </tr>
                    <tr class="firstRow">
                        <td class="align_right" style="word-break: break-all;">执行时间限制</td>
                        <th colspan="4" class="buy_title" style="word-break: break-all;">
                          {$config.max_execution_time}秒
                        </th>
                    </tr>
                    <tr class="firstRow">
                        <td class="align_right" style="word-break: break-all;">服务器端口</td>
                        <th colspan="4" class="buy_title" style="word-break: break-all;">
                          {$config.server_port}
                        </th>
                    </tr>
                    <tr class="firstRow">
                        <td class="align_right" style="word-break: break-all;">服务器IP</td>
                        <th colspan="4" class="buy_title" style="word-break: break-all;">
                          内网IP为：{$config.server_ip}  公网IP为：{$config.Public_ip}
                        </th>
                    </tr>
                    <tr class="firstRow">
                        <td class="align_right" style="word-break: break-all;">WEB运行环境</td>
                        <th colspan="4" class="buy_title" style="word-break: break-all;">
                        {$config.server_soft}
                        </th>
                   
                    </tr>
                     <tr class="firstRow">
                        <td class="align_right" style="word-break: break-all;">MySQL数据库版本</td>
                        <th colspan="4" class="buy_title" style="word-break: break-all;">
                        {$config.mysql_version}
                         </th>
                    </tr> 
                    <tr class="firstRow">
                        <td class="align_right" style="word-break: break-all;">ThinkPHP版本</td>
                        <th colspan="4" class="buy_title" style="word-break: break-all;">
                            {$config.version}<a class="layui-badge layui-bg-blue" style="margin-left:8px"  href="https://doc.thinkphp.cn/v8_0/preface.html" target="_blank">TP8.0官方手册</a>
                        </th>
                    </tr>
                     <tr class="firstRow">
                        <td class="align_right" style="word-break: break-all;">Layui版本</td>
                        <th colspan="4" class="buy_title" style="word-break: break-all;"> <span id="layui"></span>
                         <a class="layui-badge layui-bg-blue" style="margin-left:8px" href="https://layui.dev/docs/2/" target="_blank">Layui文档</a>
                         </th>
                    </tr>
                    <tr class="firstRow">
                        <td class="align_right" style="word-break: break-all;">BUG反馈</td>
                        <th colspan="4" class="buy_title" style="word-break: break-all;">
                            <a href="mailto:8142355@qq.com" target="_blank">8142355@qq.com</a>
                        </th>
            
                    </tr>
                     <tr class="firstRow">
                        <td class="align_right" style="word-break: break-all;">QQ交流群</td>
                        <th colspan="4" class="buy_title" style="word-break: break-all;">
                            <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=2RB_MinDT0ydb9TOgUOJ1z2Ev15ZOaea&jump_from=webapi&authKey=KLneRyT1o+rLNn0wpvBm/NUmVCMkGtZvOXy8m8Bcx87QpoXm2ODyH+NvvyjqvJDN"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="THINKPHP6.1" title="THINKPHP6.1"></a>
                        </th>
                    </tr>
                     <tr class="firstRow">
                        <td class="align_right" style="word-break: break-all;">获取渠道</td>
                        <th colspan="4" class="buy_title" style="word-break: break-all;">
                            <a href="http://m.ztuc.cn" class="layui-btn layui-btn-sm layui-btn-danger" target="_blank">获取授权</a>
                        </th>
                    </tr>
                     <tr class="firstRow">
                        <td class="align_right" style="word-break: break-all;">获取渠道</td>
                       <th colspan="4" class="buy_title" style="word-break: break-all;">
                            <a href="http://m.ztuc.cn" class="layui-btn layui-btn-sm layui-btn-danger" target="_blank"><span class="test"></span></a>
                        </th>
                    </tr>
                </table>
            </div>
        </div>
        <div class="layui-col-md5 layui-col-sm6 layui-col-xs12">
           
        <div class="layui-card">
            <div class="layui-card-header"><h3>操作日志</h3><a ew-title="操作日志" ew-href="/userLog/log_list" class="pull-right"><i class="fa fa-mail-forward"></i></a></div>
            <div class="layui-card-body" style="padding:0px 15px;">
                <ul class="layui-timeline" id="logs"></ul>
            </div>
        </div>
        </div>
    </div>
{/block}
{block name="js"}
  <script type="text/javascript" src="{__JS__}/echarts/echarts.min.js?v={:rand_number()}"></script>
  <script type="text/javascript" src="{__JS__}/echarts/echartsTheme.js?v={:rand_number()}"></script>
<script language="JavaScript">
    function getLogs() {
        $.ajax({
            url: "/userLog/get_log_list",
            type: 'post',
            data: {
                page: 1,
                limit: 13
            },
            success: function (e) {
                if (e.code == 0) {
                    var html = '';
                    $.each(e.data, function (key, value) {
                        html += '<li class="layui-timeline-item">\
                                        <i class="layui-icon layui-timeline-axis"></i>\
                                        <div class="layui-timeline-content layui-text">\
                                         <div class="layui-timeline-title"><span title="'+ value.id + '">' + value.times + '</span>，' + value.content + '</div>\
                                        </div>\
                                      </li>';
                    });
                    $('#logs').html(html);
                }
            }
        })
    }
    function gouguInit() {
        getLogs();
        $('.panel-more').on('click',function(){
            getLogs();
        })
    }
    
</script>
<script type="text/javascript" src="{__JS__}/gougu/gouguInit.js?v={:rand_number()}"></script>
<script language="JavaScript" type="text/javascript">
      // 显示 Layui 版本
      //var versionTPL = lay('#version')[0].innerHTML;
      //lay('#version').html(layui.laytpl(versionTPL).render({}))
      document.getElementById("layui").innerHTML = "Layui-v" + layui.v + " ";

    layui.use(function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var admin = layui.admin;
        var util = layui.util;//倒计时
         //示例倒计时
        var serverTime = new Date().getTime(); //假设为当前服务器时间
        var endTime = <?php echo floor(($expire_time)); ?>*1000 //假设为结束日期
        // 倒计时60s  serverTime+60000
        util.countdown(endTime, serverTime, function(date, serverTime, timer){
            //console.log(date)
           //console.log(serverTime/1000)
            //console.log(timer)rgba(255,255,255,0.3)
            var str = date[0] + '天' + date[1] + '时' +  date[2] + '分' + date[3] + '秒';
            layui.$('#test').html('距离结束还有：'+ str);
            layui.$('.test').css('padding','5px 10px').css('border','none').css('border-radius','50px 50px 50px 50px').css('color','#ffffff').css('background-color','rgba(255,0,0,0.5)').html('距离结束还有：'+ str);

            if (serverTime==endTime){
                layer.open({
                    title: '<div style="color:#44ff00">完成</div>'
                    ,content: '倒计时结束'
                });
            }
        });


      
        // 渲染日签到图表
        var myCharts1 = echarts.init(document.getElementById('tjDivDay'), myEchartsTheme);
        var options1 = {
            title: {
                show: true,
                x: 'center',
                y: '33%',
                text: '签到人数/应到人数',
                textStyle: {
                    fontSize: 20,
                    color: '#333'
                },
                subtextStyle: {
                    fontSize: 50,
                    lineHeight: 100,
                    color: '#28a6d6'
                }
            },
            color: ['#18B4E7', '#ddd'],
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '人数',
                    type: 'pie',
                    radius: ['75%', '80%'],
                    label: {
                        normal: {
                            show: false
                        }
                    }
                }
            ]
        };
        myCharts1.setOption(options1);
         // 搜索
        var res1 = JSON.parse('<?php echo html_entity_decode($datajson_day); ?>');
        var mSignList = res1.signList;
        myCharts1.setOption({
            title: {
                subtext: res1.signNum + "/" + res1.allNum
            },
            series: [
                {
                    data: [
                        {name: "已签到", value: res1.signNum},
                        {name: "未签到", value: res1.allNum - res1.signNum}
                    ]
                }
            ]
        });
        // 签到明细
        $('#btnShowDetail').click(function () {
            layer.open({
                type: 1,
                area: '500px',
                offset: '80px',
                title: '签到明细',
                content: '<table id="signDetailTable" lay-filter="signDetailTable"></table>',
                success: function (layero, dIndex) {
                    // 渲染表格
                    table.render({
                        elem: '#signDetailTable',
                        data: mSignList,
                        page: false,
                        height: 280,
                        lineStyle: 'height: 100px;',//头像高度
                        cellMinWidth: 100,
                        cols: [[
                            {type: 'numbers', title: '#'},
                            {field: 'avatar', width:'80', title: '会员头像', 
                              templet: function (d) {
                            var url = d.avatar;
                        return '<img src="' + url + '" class="tdImg" tb-img/>';
                        }},
                            {field: 'name', title: '会员姓名',align: 'center'},
                            {field: 'types', title: '签到类型',align: 'center',}, 
                            {field: 'time', width:'160', title: '签到时间'},
                        ]],
                        done: function () {
                            $(layero).find('.layui-table-view').css('margin', '0');
                        }
                    });
                    // end
                }
            });
        });

        // ------------------------------------------------------------------------
        // 渲染周签到图表
        var myCharts2 = echarts.init(document.getElementById('tjDivWeek'), myEchartsTheme);
        var options2 = {
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    lineStyle: {
                        color: '#E0E0E0'
                    }
                }
            },
            color: ['#10B4E8', '#FFA800'],
            legend: {
                orient: 'vertical',
                right: '0px',
                top: '25px',
                data: ['已签到', '未签到']
            },
            grid: {
                top: '120px',
                left: '35px',
                right: '55px'
            },
            xAxis: {
                name: '星期',
                nameTextStyle: {
                    color: '#333'
                },
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisLine: {
                    lineStyle: {
                        color: '#E0E0E0'
                    },
                    symbol: ['none', 'arrow'],
                    symbolOffset: [0, 10]
                },
                axisLabel: {
                    color: '#9A9A9A'
                }
            },
            yAxis: {
                name: '人数',
                nameTextStyle: {
                    color: '#333'
                },
                type: 'value',
                boundaryGap: ['0', '20%'],
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#E0E0E0'
                    },
                    symbol: ['none', 'arrow'],
                    symbolOffset: [0, 10]
                },
                axisLabel: {
                    color: '#9A9A9A'
                },
                splitLine: {
                    show: false
                },
                splitArea: {
                    show: false
                },
                minInterval: 1
            },
            series: [
                {
                    name: '已签到',
                    type: 'bar',
                    stack: "one",
                    barMaxWidth: '30px',
                    data: [0, 0, 0, 0, 0, 0, 0],
                    label: {
                        normal: {
                            show: true,
                            position: 'inside',
                            formatter: function (params) {
                                if (params.value > 0) {
                                    return params.value;
                                } else {
                                    return '';
                                }
                            }
                        }
                    }
                },
                {
                    name: '未签到',
                    type: 'bar',
                    stack: "one",
                    barMaxWidth: '30px',
                    data: [0, 0, 0, 0, 0, 0, 0],
                    label: {
                        normal: {
                            show: true,
                            position: 'inside'
                        }
                    }
                }
            ]
        };
        myCharts2.setOption(options2);
        // 获取数据
        var res2 = JSON.parse('<?php echo html_entity_decode($datajson_week); ?>');
        var dateList = [], signNums = [], unSignNums = [];
        for (var i = 0; i < res2.data.length; i++) {
            var one = res2.data[i];
            dateList.push(one.date);
            signNums.push(one.signNum);
            unSignNums.push(one.unSignNum);
        }
        myCharts2.setOption({
            series: [{data: signNums}, {data: unSignNums}]
        });

        // -------------------------------------------------------------------------
        // 渲染月签到图表
        var myCharts3 = echarts.init(document.getElementById('tjDivMonth'), myEchartsTheme);
        var options3 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#E0E0E0'
                    }
                },
                formatter: '{b}号<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#10B4E8;"></span>{a0}: {c0}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#FFA800;"></span>{a1}: {c1}'
            },
            color: ['#10B4E8', '#FFA800'],
            legend: {
                orient: 'vertical',
                right: '0px',
                top: '25px',
                data: ['已签到', '未签到']
            },
            grid: {
                top: '120px',
                left: '35px',
                right: '55px'
            },
            xAxis: {
                name: '日期',
                nameTextStyle: {
                    color: '#333'
                },
                type: 'category',
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
                axisLine: {
                    lineStyle: {
                        color: '#E0E0E0'
                    },
                    symbol: ['none', 'arrow'],
                    symbolOffset: [0, 10]
                },
                axisLabel: {
                    color: '#9A9A9A',
                    interval: function (index, value) {
                        if (index == 0 || ((index + 1) % 5 == 0)) {
                            return true;
                        }
                        return false;
                    }
                }
            },
            yAxis: {
                name: '人数',
                nameTextStyle: {
                    color: '#333'
                },
                type: 'value',
                boundaryGap: ['0', '20%'],
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#E0E0E0'
                    },
                    symbol: ['none', 'arrow'],
                    symbolOffset: [0, 10]
                },
                axisLabel: {
                    color: '#9A9A9A'
                },
                splitLine: {
                    show: false
                },
                splitArea: {
                    show: false
                },
                minInterval: 1
            },
            series: [
                {
                    name: '已签到',
                    type: 'line',
                    smooth: false,
                    data: []
                },
                {
                    name: '未签到',
                    type: 'line',
                    smooth: false,
                    data: []
                }
            ]
        };
        myCharts3.setOption(options3);
        // 获取数据
        var res3 = JSON.parse('{$datajson_month|raw|html_entity_decode}');
        var dateList = [], signNums = [], unSignNums = [];
        for (var i = 0; i < res3.data.length; i++) {
            var one = res3.data[i];
            dateList.push(i + 1);
            signNums.push(one.signNum);
            unSignNums.push(one.unSignNum);
        }
        myCharts3.setOption({
            xAxis: {data: dateList},
            series: [{data: signNums}, {data: unSignNums}]
        });
        // -------------------------------------------------------------------------

        // 窗口大小改变事件
        window.onresize = function () {
            myCharts1.resize();
            myCharts2.resize();
            myCharts3.resize();
        };

    });

</script>
{/block}